import React, {Component} from 'react'
import {View, Text, StyleSheet, Image, Dimensions, TouchableOpacity, ActivityIndicator} from 'react-native'

import Swiper from 'react-native-swiper'

const {width, height} = Dimensions.get('window');


export default class SwiperComponent extends Component {

  constructor(props) {
    super(props)
    //alert(this.props.bannerData.length);
  }

  componentDidMount() {

  }

  renderBanner() {


  }

  render() {
    const {bannerData} = {...this.props};
    return (
        <View style={{height: width * this.props.biLie}}>
          <Swiper style={styles.wrapper}
                  height={200}
                  horizontal={true}
                  autoplay={true}
                  paginationStyle={{bottom: 5}}
          >
            {
              bannerData.map((val, index) =>
                  <View key={index} style={styles.slide}>
                    <Image resizeMode='stretch' style={{width: width, height: width * this.props.biLie}}
                           source={{uri: val.pic2 ? val.pic2 : val}}/>
                  </View>
              )
            }

          </Swiper>
        </View>
    )

  }

}

const styles = StyleSheet.create({
  container: {
    //height: width * (308 / 705)
  },

  wrapper: {},
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },

  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },

  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },

  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },

  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  },

  image: {
    //width: width,
  }
});